<!--
<template>
  &lt;!&ndash; 添加或修改报销发票信息管理对话框 &ndash;&gt;
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body v-dialogDrag width="80%">
    <el-form :model="form" :rules="rules" label-width="120px" ref="form">
      <el-tabs class="detail-tab" type="card" v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-row :gutter="20">
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="报销类型" prop="type">
                <el-select disabled placeholder="请选择报销类型" v-model="form.type">
                  <el-option
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    v-for="dict in dict.type.reimburse_type"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>&ndash;&gt;
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="报销人" prop="userId">
                <el-input v-model="form.userId" placeholder="请输入报销人"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            <el-col :span="12">
              <el-form-item label="报销申请日期" prop="imburseDate">
                <el-date-picker clearable
                                placeholder="请选择报销日期"
                                type="date"
                                v-model="form.imburseDate"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报销金额" prop="imburseMoney">
                <el-input disabled placeholder="请输入报销金额" v-model="form.imburseMoney"/>
              </el-form-item>
            </el-col>
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="报销人姓名" prop="userName">
                <el-input disabled placeholder="请输入报销人姓名" v-model="form.userName"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            &lt;!&ndash;<el-col :span="24">
              <el-form-item label="关联发票" prop="taxId">
                <el-input v-model="form.taxId" type="textarea" placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发票号码" prop="taxNo">
                <el-input v-model="form.taxNo" type="textarea" placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票金额" prop="taxMoney">
                <el-input v-model="form.taxMoney" placeholder="请输入发票金额"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            &lt;!&ndash;<el-col :span="24">
              <el-form-item label="报销备注" prop="infomation">
                <el-input placeholder="请输入内容" type="textarea" v-model="form.infomation"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            &lt;!&ndash;<el-col :span="24">
              <el-form-item label="关联商品id" prop="goodsIds">
                <el-input v-model="form.goodsIds" type="textarea" placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件">
                <file-upload v-model="form.file"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报销状态">
                <el-radio-group v-model="form.status">
                  <el-radio
                    v-for="dict in dict.type.imburse_status"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="删除标志" prop="delFlag">
                <el-input v-model="form.delFlag" placeholder="请输入删除标志"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>&ndash;&gt;
          </el-row>
        </el-tab-pane>
      </el-tabs>
      &lt;!&ndash;<el-tabs class="detail-tab" type="card" v-if="form.type == '0'" v-model="activeName">
        <el-tab-pane label="付款信息" name="first">
          <span style="color: red;">请先选择商品,部分项目可根据商品关联信息自动生成</span>&ndash;&gt;
          <el-row :gutter="20" v-if="form.type == '0'" >
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="项目名称" prop="prjname">
                <el-input placeholder="请输入项目名称" v-model="form.prjname"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            <el-col :span="12">
              <el-form-item label="项目名称" prop="prjid">
                <el-select v-model="form.prjid" placeholder="请选择项目" filterable clearable ref="prjselect"
                           style="width: 300px">
                  <el-option v-for="dict in PrjNameOptions"
                             :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              &lt;!&ndash;<el-form-item label="请款人名称" prop="qkrmc">
                <el-input placeholder="请输入请款人名称" v-model="form.qkrmc"/>
              </el-form-item>&ndash;&gt;
              <el-form-item label="请款人名称" prop="qkrmc">
                <el-select v-model="form.qkrmc" placeholder="请款人名称" filterable clearable ref="qkrmc"
                           style="width: 300px">
                  <el-option v-for="dict in SupplierNameOptions"
                             @click.native="changeSupp(dict)"
                             :key="dict.dictValue" :label="dict.id" :value="dict.dictLabel"/>
                </el-select>
              </el-form-item>
            </el-col>
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="请款人开户行" prop="qkrkhh">
                <el-input placeholder="请输入请款人开户行" v-model="form.qkrkhh"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请款人账号" prop="qkrzh">
                <el-input placeholder="请输入请款人账号" v-model="form.qkrzh"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            <el-col :span="12">
              <el-form-item label="资金用途" prop="zjyt">
                <el-input placeholder="请输入资金用途(货款,运费 等)" v-model="form.zjyt"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请款事由" prop="qksy">
                <el-input placeholder="请输入请款事由" v-model="form.qksy"/>
              </el-form-item>
            </el-col>
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="请款合计" prop="qkhj">
                <el-input placeholder="请输入请款合计" v-model="form.qkhj"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            <el-col :span="24">
              <el-form-item label="付款备注信息" prop="qkbz">
                <el-input placeholder="请输入付款备注信息(不需备注请填“无”)" @change="changeRemark" type="textarea" v-model="form.qkbz"/>
              </el-form-item>
            </el-col>

          </el-row>
        &lt;!&ndash;</el-tab-pane>
      </el-tabs>&ndash;&gt;

&lt;!&ndash;      <el-tabs class="detail-tab" type="card" v-model="activeName">&ndash;&gt;
      &lt;!&ndash;  <el-tab-pane label="付款信息" name="first">
          <span style="color: red;">请先选择商品,请款合计可自动生成</span>&ndash;&gt;
          <el-row :gutter="20"  v-if="form.type == '1'">
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="项目名称" prop="prjname">
                <el-input placeholder="请输入项目名称" v-model="form.prjname"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="项目名称" prop="prjid">
                <el-select v-model="form.prjid" placeholder="请选择项目" filterable clearable ref="prjselect"
                           style="width: 300px">
                  <el-option v-for="dict in PrjNameOptions"
                             :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请款人名称" prop="qkrmc">
                <el-input placeholder="请输入请款人名称" v-model="form.qkrmc"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请款人开户行" prop="qkrkhh">
                <el-input placeholder="请输入请款人开户行" v-model="form.qkrkhh"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请款人账号" prop="qkrzh">
                <el-input placeholder="请输入请款人账号" v-model="form.qkrzh"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            <el-col :span="12">
              <el-form-item label="资金用途" prop="zjyt">
                <el-input placeholder="请输入资金用途(货款,运费 等)" v-model="form.zjyt"/>
              </el-form-item>
            </el-col>
            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="请款事由" prop="qksy">
                <el-input placeholder="请输入请款事由" v-model="form.qksy"/>
              </el-form-item>
            </el-col>&ndash;&gt;
            <el-col :span="12">
              <el-form-item label="请款合计" prop="qkhj">
                <el-input placeholder="请输入请款合计" v-model="form.qkhj"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="付款备注信息" prop="qkbz">
                <el-input placeholder="请输入付款备注信息(不需备注请填“无”)" @change="changeRemark"  type="textarea" v-model="form.qkbz"/>
              </el-form-item>
            </el-col>

          </el-row>
&lt;!&ndash;        </el-tab-pane>
      </el-tabs>&ndash;&gt;
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button @click="handleAddOrderList" icon="el-icon-plus" plain size="mini" type="primary">选择商品
        </el-button>
      </el-col>
    </el-row>

    <el-table :data="form.orderList" v-loading="loadingOrderList">
      <el-table-column align="center" label="商品名称" prop="name"/>
      <el-table-column align="center" label="商品品牌" prop="brand"/>
      <el-table-column align="center" label="商品型号" prop="model"/>
      <el-table-column align="center" label="商品单位" prop="unit"/>
      &lt;!&ndash;      <el-table-column align="center" label="含税单价" prop="costPriceTax"/>&ndash;&gt;
      <el-table-column align="center" label="采购数量" prop="count"/>
      <el-table-column align="center" label="采购单价" prop="costPrice"/>
      <el-table-column align="center" label="采购总价" prop="cost"/>
      <el-table-column align="center" label="库存数量" prop="remainderCount"/>
      &lt;!&ndash;<el-table-column label="有效日期" align="center" prop="validityTerm" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.validityTerm, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>&ndash;&gt;
      <el-table-column align="center" label="采购人姓名" prop="buyName"/>
      &lt;!&ndash;<el-table-column label="采购日期" align="center" prop="buyDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.buyDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>&ndash;&gt;
      <el-table-column align="center" label="采购方式" prop="buyType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.buy_type" :value="scope.row.buyType"/>
        </template>
      </el-table-column>
      &lt;!&ndash;<el-table-column label="是否报销" align="center" prop="reimburse">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yes_no" :value="scope.row.reimburse"/>
        </template>
      </el-table-column>&ndash;&gt;
      &lt;!&ndash;      <el-table-column label="供应商名称" align="center" prop="supplierName"/>&ndash;&gt;
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-popconfirm :title="`确认移除当前数据项？`" @confirm="handleDeleteRow(scope.row)"
                         style="margin-left: 10px;">
            <el-button icon="el-icon-delete" size="mini" slot="reference" type="text"
            >移除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div class="dialog-footer" slot="footer">
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

    <goods-order-in-list-for-imbursement @ok="updateOrderList"
                                         ref="GoodsOrderInListForImbursement"></goods-order-in-list-for-imbursement>
  </el-dialog>
</template>

<script>
    import {addAction, getAction, getById, updateAction, deepClone} from '@/api/manage';
    import GoodsOrderInListForImbursement from "../../goodsOrderIn/GoodsOrderInListForImbursement";

    export default {
        name: "GoodsReimbursementFormForOrder",
        dicts: ['buy_type', 'imburse_status', 'yes_no'],
        components: {
            GoodsOrderInListForImbursement,
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                loadingOrderList: false,
                activeName: "first",
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    prjid: [
                        {required: true, message: "项目名称不能为空", trigger: "blur"}
                    ],
                    qkrmc: [
                        {required: true, message: "请款人名称不能为空", trigger: "blur"}
                    ],
                    qkrkhh: [
                        {required: true, message: "请款人开户行不能为空", trigger: "blur"}
                    ],
                    qkrzh: [
                        {required: true, message: "请款人账号不能为空", trigger: "blur"}
                    ],
                    zjyt: [
                        {required: true, message: "资金用途不能为空", trigger: "blur"}
                    ],
                    qksy: [
                        {required: true, message: "请款事由不能为空", trigger: "blur"}
                    ],
                    qkbz: [
                        {required: true, message: "付款备注不能为空(不需备注请填“无”)", trigger: "blur"}
                    ],
                    qkhj: [
                        {required: true, message: "请款合计不能为空", trigger: "blur"}
                    ],
                },
                url: {
                    getById: '/goodsReimbursement/goodsReimbursement/',
                    add: '/goodsReimbursement/goodsReimbursement/add',
                    edit: '/goodsReimbursement/goodsReimbursement/edit',
                    addNew: '/goodsReimbursement/goodsReimbursement/addNew',
                    editNew: '/goodsReimbursement/goodsReimbursement/editNew',
                    editOrderInfo: '/goodsOrderIn/goodsOrderIn/editForImburseId',
                    getSupplierById: '/goodsSupplier/goodsSupplier/',
                    digitUppercase: '/common/digitUppercase/',
                    prjNames: '/projectBaseInfo/projectBaseInfo/prjNames',
                    suppNames: '/goodsSupplier/goodsSupplier/suppNames',
                },

                orderList: [],
                orderIds: "",
                PrjNameOptions: [],
                SupplierNameOptions: [],
                newDate: "",
            };
        },
        created() {
          var Y = new Date().getFullYear();
          var M = new Date().getMonth() + 1;
          var D = new Date().getDate();
          var times = Y + (M < 10 ? "-0" : "-") + M + (D < 10 ? "-0" : "-") + D;
          this.newDate = times;
          this.form.infomation = times;
          this.form.qkbz = times;
        },
        methods: {
            changeSupp(dict){
              this.form.qkrkhh = dict.label;
              this.form.qkrzh = dict.value;
            },
            intDictsForPrj() {
                let that = this;
                getAction(that.url.prjNames, {orderByColumn: "create_time", isAsc: "desc"}).then(res => {
                    that.PrjNameOptions = res.data.nameList;
                })
            },
          intDictsForSupp() {
            let that = this;
            getAction(that.url.suppNames, {orderByColumn: "create_time", isAsc: "desc"}).then(res => {
              that.SupplierNameOptions = res.data.nameList;
            })
          },
            changeRemark(val1){
              let that = this;
              that.form.infomation=that.form.qkbz;
              // that.$set(that.form.qkbz, "infomation", val1);
            },
            //获取供应商信息
            getSupplierById(supplierId) {
                let that = this;
                getById(this.url.getSupplierById, supplierId).then(response => {
                    let data = response.data;
                    that.$set(this.form, "qkrmc", data.name);
                    that.$set(this.form, "qkrkhh", data.bankName);
                    that.$set(this.form, "qkrzh", data.bankNo);
                });
            },
            //金额转大写
            digitUppercase(num) {
                let that = this;
                getById(this.url.digitUppercase, num).then(response => {
                    that.$set(this.form, "qkhj", response.msg);
                });
            },
            //删除当前行,并解除入库商品绑定的报销信息id
            handleDeleteRow(row) {
                let that = this;
                let id = row.id;
                let orderIds = "";
                let selectRows = [];
                let imburseMoney = 0;
                that.form.orderList.forEach(selectRow => {
                    if (selectRow.id != id) {
                        orderIds += "," + selectRow.id;
                        selectRows.push(selectRow);
                        imburseMoney = imburseMoney + selectRow.cost
                    }
                })
                that.form.goodsIds = orderIds;
                that.form.orderList = selectRows;
                that.form.imburseMoney = imburseMoney;
                that.form.remRemain = imburseMoney;
                that.digitUppercase(imburseMoney);
                /*updateAction(that.url.editOrderInfo, {"id": row.id, "imburseId": ""}).then(response => {
                    that.orderList = that.orderList.filter((item) => {
                        return item.id != row.id
                    });
                    that.form.orderList = that.orderList;
                    updateAction(that.url.editNew, that.form).then(response => {
                        that.$modal.msgSuccess("更新成功!");
                    });
                });*/
            },
            //打开选择商品弹窗
            handleAddOrderList() {
                // this.$refs.GoodsOrderInListForImbursement.showSelectOrderList(this.form.type);
                this.$refs.GoodsOrderInListForImbursement.showSelectOrderList0626(this.form.type, this.form.goodsIds);
            },
            //选择商品成功后,将选择的商品放进当前页面的商品列表中
            updateOrderList(selectRows) {
                let that = this;
                if (that.form.type == '0') {
                    let continueFlag = true;
                    let orderIds = deepClone(that.form.goodsIds);
                    let orderList = deepClone(that.form.orderList);
                    let imburseMoney = deepClone(that.form.imburseMoney);
                    let supplierId = "";
                    // let qksy = that.form.qksy;//请款事由
                    for (let i = 0; i < selectRows.length; i++) {
                        let row = selectRows[i];
                        if (orderIds.indexOf(row.id) == -1) {
                            orderIds += "," + row.id;
                            orderList.push(row);
                            imburseMoney = imburseMoney + row.cost;
                            // if (qksy.indexOf(row.name) == -1) {
                            //     qksy = qksy + row.name + ";";
                            // }
                        }
                        if (supplierId == "" || supplierId == row.supplierId) {
                            supplierId = row.supplierId;
                        } else if (supplierId != row.supplierId) {//选择的商品供货商不一致,退出逻辑并提示重新选择商品
                            continueFlag = false;
                            that.$modal.msgError("商品供货商不一致,请重新选择");
                            orderIds = that.form.goodsIds;
                            orderList = that.form.orderList;
                            imburseMoney = that.form.imburseMoney;
                            break;
                        }
                    }
                    if (continueFlag) {
                        that.getSupplierById(supplierId);
                        that.digitUppercase(imburseMoney);
                        that.form.goodsIds = orderIds;
                        that.form.orderList = orderList;
                        that.form.imburseMoney = imburseMoney;
                        that.form.remRemain = imburseMoney;
                        // that.form.qksy = qksy;
                    }
                } else {
                    let orderIds = that.form.goodsIds;
                    let orderList = that.form.orderList;
                    let imburseMoney = that.form.imburseMoney;
                    for (let i = 0; i < selectRows.length; i++) {
                        let row = selectRows[i];
                        if (orderIds.indexOf(row.id) == -1) {
                            orderIds += "," + row.id;
                            orderList.push(row);
                            imburseMoney = imburseMoney + row.cost
                        }
                    }
                    that.form.goodsIds = orderIds;
                    that.form.orderList = orderList;
                    that.form.imburseMoney = imburseMoney;
                    that.form.remRemain = imburseMoney;
                    that.digitUppercase(imburseMoney);
                }
                /*let orderIds = that.form.goodsIds;
                let orderList = that.form.orderList;
                let imburseMoney = that.form.imburseMoney;
                for (let i = 0; i < selectRows.length; i++) {
                    let row = selectRows[i];
                    if (orderIds.indexOf(row.id) == -1) {
                        orderIds += "," + row.id;
                        orderList.push(row);
                        imburseMoney = imburseMoney + row.cost
                    }
                }
                that.form.goodsIds = orderIds;
                that.form.orderList = orderList;
                that.form.imburseMoney = imburseMoney;
                that.form.remRemain = imburseMoney;*/
                // that.submitFormNew();
            },
            /*submitFormNew() {
                let that = this;
                that.$refs["form"].validate(valid => {
                    if (valid) {
                        if (that.form.id != null) {
                            updateAction(that.url.editNew, that.form).then(response => {
                                that.$modal.msgSuccess("选择商品成功");
                            });
                        } else {
                            addAction(that.url.addNew, that.form).then(response => {
                                that.$modal.msgSuccess("选择商品成功");
                                that.form = response.data;
                            });
                        }
                    }
                });
            },*/

            //打开弹窗,用于显示关联的商品列表
            handleAddNewImbursement(type) {
                let that = this;
                that.reset();
                that.open = true;
                that.title = "报销信息管理";
                that.form.type = type;
                that.intDictsForPrj();
                that.intDictsForSupp();
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    type: null,
                    userId: this.$store.getters.userId,
                    userName: this.$store.getters.nickName,
                    imburseDate: new Date(),
                    imburseMoney: null,
                    taxId: null,
                    taxNo: null,
                    taxMoney: null,
                    infomation: this.newDate,
                    goodsIds: "",
                    file: null,
                    status: "0",
                    delFlag: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null,
                    remark: null,
                    orderList: [],
                    prjname: "",
                    qkrmc: "",
                    qkrkhh: "",
                    qkrzh: "",
                    zjyt: "",
                    qksy: "",
                    qkhj: "",
                    qkbz: this.newDate,
                };
                this.orderList = [];
                this.resetForm("form");
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加报销发票信息管理";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                let that = this;
                that.reset();
                const id = row.id || that.ids;
                getById(that.url.getById, id).then(response => {
                    that.form = response.data;
                    // that.orderList = that.form.orderList;
                    that.open = true;
                    that.title = "修改报销发票信息管理";
                });
            },
            /** 提交按钮 */
            submitForm() {
                let that = this;
                that.$refs["form"].validate(valid => {
                    if (valid) {
                        if (that.$refs.prjselect) {
                            that.form.prjname = that.$refs.prjselect.selected.label;
                        }
                        if (that.form.id != null) {
                            updateAction(that.url.editNew, that.form).then(response => {
                                that.$modal.msgSuccess("修改成功");
                                that.open = false;
                                that.$emit('ok');
                            });
                        } else {
                            addAction(that.url.addNew, that.form).then(response => {
                                that.$modal.msgSuccess("新增成功");
                                that.open = false;
                                that.$emit('ok');
                            });
                        }
                    }
                });
            },
        }
    };
</script>
-->
